<template>
    <div class="x-cou">
        <div class="x-content" v-for="(v,index) in listData" :key="index">
            <div class="x-content-left x-flex1 x-radius10">
                <text class="x-title">{{v.title}}</text>
                <div class="x-center">
                    <div class="x-amount-div"> 
                        <text class="x-amount-left">￥</text>
                        <text class="x-amount-font">{{v.amount/100}}</text>
                    </div>
                    <div class="x-center-right">
                        <text class="x-center-text">满{{v.amount_limit/100}}可使用</text>
                        <text class="x-center-text">到期时间：{{getTime(v.limit_time)}}</text>
                    </div>
                </div>
                <text class="x-remak">部分商品可用</text>
            </div>
            <div 
                class="x-content-right x-radius10" 
                :style="{backgroundColor:getBackground(ctype,v)}" 
                @click="buttonClick(ctype,v,index)">
                <text class="x-right-text">{{getText(ctype,v)}}</text>
            </div>
            <!-- 半圆 -->
            <div class="x-trueradius x-top0"></div>
            <div class="x-trueradius x-bottom0"></div>
        </div>
    </div>
</template>
<script>
import asCore from "../../../../common/js/core";
export default {
    props: {
      listData: {
        type: Array,
        default: () => ([])
      },
      ctype :{
        default:1
      }
    },
    data(){
        return {
            imageurl:asCore.localpath + "img/coupon/q50.png"
        }
    },
    methods:{
        buttonClick(type,data,index){
            this.$emit("buttonClick",type,data,index);
        },
        getBackground(type,data){
            if(data['isreceive']){
                return "#c2c2c2";
            }
            if(type==1||type==4){
                return "#887147";
            }else{
                return "#c2c2c2";
            }
        },
        getText(type,data){
            if(data['isreceive']){
                return "已领取";
            }
            if(type==1){
                return "立即使用";
            }else if(type==2){
                return "已使用";
            }else if(type==3){
                return "已过期";
            }else if(type==4){
                return "立即领取";
            }
            
        },
        getTime(time){
            return this.formatDate(new Date(time),"yyyy-MM-dd");
        },
        formatDate(date, fmt){
            if (/(y+)/.test(fmt)) {
                fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
            }
            let o = {
                'M+': date.getMonth() + 1,
                'd+': date.getDate(),
                'h+': date.getHours(),
                'm+': date.getMinutes(),
                's+': date.getSeconds()
            };
            for (let k in o) {
                if (new RegExp(`(${k})`).test(fmt)) {
                    let str = o[k] + '';
                    fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : this.padLeftZero(str));
                }
            }
            return fmt;
        },
        padLeftZero(str) {
            return ('00' + str).substr(str.length);
        }
    }
}
</script>
<style scoped>
.iconfont{
    font-family: iconfont;
}
.x-flex1{
    flex: 1;
}
.x-cou {
    padding-bottom: 25px;
}
.x-content {
    padding-left: 25px;
    padding-right: 25px;
    flex-direction: row;
    padding-top:25px;
    position: relative;
}
.x-radius10 {
    border-radius: 10px;
}
.x-content-left {
    height:260px;
    background-color: #fff;
    padding:20px;
    padding-top:15px;
}
.x-content-right {
    height:260px;
    width: 140px;
    background-color: #887147;
    align-items: center;
    justify-content: center;
}
.x-trueradius {
    border-radius: 40px;
    height:40px;
    width: 40px;
    position: absolute;
    right:145px;
    background-color: #dedfe1;
}
.x-title {
    color: #312517;
    font-size:35px;
    font-weight: bold;
    border-bottom-color: #e9decc;
    border-bottom-width: 1px;
    padding-bottom:10px;
}
.x-amount-div {
    height: 120px;
    width: 175px;
    flex-direction: row;
    align-items: center;
}
.x-amount-left {
    color: #af0a29;
    font-size:30px;

}
.x-amount-font {
    color: #af0a29;
    font-size:55px;
}
.x-remak {
    color: #4b4231;
    font-size: 28px;
    padding-top: 10px;
    border-top-color: #e9decc;
    border-top-width: 1px;
}
.x-right-text {
    color:#fff;
    font-size: 33px;
    flex-direction: column;
    padding-left: 5px;
    width: 50px;
    font-weight:bold; 
}
.x-center {
    flex-direction: row;
}
.x-center-right {
    flex-direction: column;
    justify-content: center;
}
.x-center-text {
    color: #1f1e24;
    font-size:28px;
}
.x-top0 {
    top: 0;
}
.x-bottom0 {
    bottom: -25;
}
</style>

